<template>
	<view class="setting-page relative">
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
		<comDetailNavigateBack title="通用设置" />
		<view class="relative">
			<view class="relative set-view flex-align-items-center" v-for="(item, index) in setLists" :key="index" @click="clickSetPopup(item)">
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/user/setting-box-bg.png`" 
					class="bg" />
				
				<view class="relative item-box flex-justify-content-between flex-align-items-center" v-if="item.isSwitchType">
					<view class="font-hanserif-bold">{{ item.name }}</view>
					<switch color="#B560FF" style="transform: scale(0.68); transform-origin: right;" 
						:checked="item.storageType === 'isRewardAudioSwitch' ? isRewardAudioSwitch : (item.storageType === 'isRewardAniamteSwitch' ? isRewardAniamteSwitch : '')"
						:data-current="item"
						@change="isSwitchChange" />
				</view>
				<view class="relative item-box flex-justify-content-between flex" v-else>
					<view class="font-hanserif-bold">{{ item.name }}</view>
					<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/icon-right.png`"
						class="item-icon" />
				</view>
			</view>
		</view>

		<!-- 规则 -->
		<comTextPopup v-model="isShowTxt">
			<template #title>
				<view class=""> {{ upPopName }} </view>
			</template>
			<view class="" v-html="rulePopupTxt"></view>
		</comTextPopup>
	</view>
</template>

<script>
	import store from '@/store';
	import { getContentHomeApi } from '@/setupproject/INTERFACE';
	export default {
		name: 'commonSettingPage',
		data() {
			return {
				upPopName: '',
				isShowTxt: false,
				rulePopupTxt: '',
				// #ifdef MP-WEIXIN
				setLists: [
					{ name: '大赏动画', isSwitchType: true, storageType: 'isRewardAniamteSwitch' },
					{ name: '开奖声音', isSwitchType: true,  storageType: 'isRewardAudioSwitch' },
					{ name: '隐私政策', type: 10, onlineType: 20 },
					{ name: '用户协议', type: 13, onlineType: 17 },
				],
				// #endif		
				// #ifdef APP-PLUS
				setLists: [
					{ name: '大赏动画', isSwitchType: true, storageType: 'isRewardAniamteSwitch' },
					{ name: '开奖声音', isSwitchType: true, storageType: 'isRewardAudioSwitch' },
					{ name: '隐私政策', type: 10, onlineType: 20 },
					{ name: '用户协议', type: 13, onlineType: 17 },
					{ name: 'ICP备案号:粤ICP备2024167794号-7A', isWebPage: true, webLink: 'https://beian.miit.gov.cn' },
				],
				// #endif
			};
		},
		computed: {
			isRewardAudioSwitch() {
				return !uni.getStorageSync('isRewardAudioSwitch');
			},
			isRewardAniamteSwitch() {
				return !uni.getStorageSync('isRewardAniamteSwitch');
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonOnline() {
				return store.getters.commonOnline;
			},
		},
		onLoad() {},
		methods: {
			isSwitchChange(e) {
				return uni.setStorageSync(e.target.dataset.current.storageType, !e.detail.value);
			},
			
			async clickSetPopup(item) {
				if(item.isSwitchType) {
					return;
				}
				
				if(item.isWebPage && item.webLink) {
					const webLink = encodeURIComponent(item.webLink);
					return uni.navigateTo({
						url: `/secondary/webViewPage/webViewPage?src=${webLink}`
					})
				}
				
				this.isShowTxt = true;
				this.upPopName = item.name;
				this.rulePopupTxt = '';

				let type = '';
				if ( this.commonOnline ) {
					type = item.onlineType;
				} else {
					type = item.type;
				}

				const { data, code } = await getContentHomeApi({ type });
				if (code !== 200) {
					return;
				}
				this.rulePopupTxt = data.content;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.setting-page {
		width: 100%;
		height: 100vh;
		.set-view {
			width: 686rpx;
			padding: 0 30rpx;
			margin: 0 auto 20rpx;
			height: 92rpx;
			.item-box {
				width: 100%;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 30rpx 0 24rpx 0;
				.item-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>
